<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学生列表-学生信息管理系统</title>
	<link rel="stylesheet" href="bootstrap.min.css">
	<link rel="stylesheet" href="datepicker/skin/WdatePicker.css">
	<style>
		.wrap{
			width: 90%;
			margin:0 auto;
		}
		#template{display: none;}
		#mask{
			position:fixed;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-color:rgba(0,0,0,.5);
			display: none;
		}
		#pop{
			padding:20px 50px;
			width:600px;
			background-color:#fff;
			border-radius:10px;
			transform:translate(-50%,-50%);
			position:fixed;
			top:50%;
			left:50%;
			display: none;
		}
		#pop h2{
			margin-bottom: 20px;
		}
		select{margin-top:5px;}
	</style>
</head>
<body>
	

	<div class="wrap">
		<h2>学生信息管理系统</h2>
		<hr>
		<button class="btn btn-primary" id="addStudent" style="float:right;">+ 新增学生</button>
		<table class="table">
			<thead>
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>所在城市</th>
					<th>入学时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody class="data-wrap">
				<tr id="template">
					<td class="data-id">1</td>
					<td class="data-name">姜晓敏</td>
					<td class="data-age">18</td>
					<td class="data-sex">女</td>
					<td class="data-city">山西</td>
					<td class="data-joinDate">2020-10-13</td>
					<td class="ope">
						<button class="btn btn-primary data-edit">编辑</button>
						<button class="btn btn-danger data-delete">删除</button>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div id="mask"></div>
	<div id="pop">
	    <h2>添加学生</h2>

	<div class="form-horizontal">
		<div class="form-group">
			<label for="data-name" class="col-sm-2 control-label">学生姓名</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id="data-name" placeholder="学生姓名">
			</div>
		</div>

		<div class="form-group">
			<label for="data-age" class="col-sm-2 control-label">年龄</label>
			<div class="col-sm-10">
				<input type="number" class="form-control" id="data-age" placeholder="年龄">
			</div>
		</div>

		<div class="form-group">
			<label for="data-age" class="col-sm-2 control-label">性别</label>
			<label class="radio-inline">
				<input type="radio" name="sex" checked>男
			</label>
			<label class="radio-inline">
				<input type="radio" name="sex" id="data-female">女
			</label>
		</div>

		<div class="form-group">
			<label class="col-sm-2 control-label">所在城市</label>
			<select name="" id="province"></select>
			<select name="" id="city"></select>
			<select name="" id="area"></select>
		</div>
		
		
		<div class="form-group">
			<label class="col-sm-2 control-label">入学日期</label>
			<div class="col-sm-10">
				<input type="date" class="form-control" id="data-joinDate" placeholder="入学日期">
			</div>
		</div>
		
		<div class="form-group" style="float:right;margin-top:20px;">
			<button id="submit" class="btn btn-primary">确认添加</button>
			<button id="cancel" class="btn btn-default">取消</button>
		</div>
	</div>
	<script src="jquery.min.js"></script>
	<script src="datepicker/WdatePicker.js"></script>
	<script src="citys.js"></script>
    <script>

		

		// 删除
		let address = "http://127.0.0.1:8080"
		let template = $("#template");
        template.find(".data-delete").click(function(){
			// 找到要删除的那一行
			let nowTr = $(this).closest("tr");
			if(confirm(`确定删除${nowTr.find(".data-name").html()}同学吗？`)){

				$.ajax({
					url:`${address}/deleteStudent`,
					data:{
						id:$(this).closest("tr").find(".data-id").html()
					},
					success(data){
						if(data === "success"){
							nowTr.fadeOut();
						}
						else{
							alert("删除失败");
						}
					}
				})

			}
		})

		// 添加
        $("#submit").click(function(){
			if($("#data-name").val() && $("#data-age").val() && $("#data-joinDate")){
				$.ajax({
					url:`${address}/addStudent`,
					data:{
						name:$("#data-name").val(),
						age:$("#data-age").val(),
						sex:$("#data-female")[0].checked ? 0 : 1,
						city:$("#province").val() + $("#city").val() + $("#area").val(),
						joinDate:$("#data-joinDate").val(),
					},
					success(data){
						if(data === "success"){
							history.go(0)
						}
						else{
							alert("操作失败")
						}
					}
				})
			}
		})

		window.onkeydown = function(event){
			if(event.keyCode === 13){
				$("#submit").click()
			}
			if(event.keyCode === 27){
				$("#cancel").click()
			}
		}

		// 新增学生显示弹出层
		$("#addStudent").click(function(){
			$("#mask").fadeIn();
			$("#pop").fadeIn();
			$("#data-name").focus()
		})
		// 点击取消
		$("#cancel").click(function(){
			$("#mask").fadeOut("fast");
			$("#pop").fadeOut("fast");
		})
		// 时间控件
		// $("#data-joinDate").click(function(){
		// 	WdatePicker();
		// })



		// 编辑
		// $(".data-wrap td").click(function(){
		// 	$("#mask").fadeIn();
		// 	$("#pop").fadeIn();
		// 	$("#pop").find("h2").html("修改成员");
		// 	$("#data-name").focus();

		// })
			
			// $.ajax({
			// 		url:`${address}/editStudent`,
			// 		data:{
			// 			name:$("#data-name").val(),
			// 			age:$("#data-age").val(),
			// 			sex:$("#data-female")[0].checked ? 0 : 1,
			// 			city:$("#province").val() + $("#city").val() + $("#area").val(),
			// 			joinDate:$("#data-joinDate").val(),
			// 		},
			// 		success(data){
			// 			if(data === "success"){
			// 				history.go(0)
			// 			}
			// 		}
			// })


        // 请求数据库中的所有内容
		$.ajax({
			url:`${address}/getStudentList`,
			success(data){
				let studentList = JSON.parse(data);
				let tbody = $(".data-wrap");
				studentList.forEach(item=>{
					let newItem = template.clone(true).attr("id","");
					newItem.find(".data-id").html(item.id)
					newItem.find(".data-name").html(item.name)
					newItem.find(".data-age").html(item.age)
					newItem.find(".data-sex").html(item.sex ? "男" : "女")
					newItem.find(".data-city").html(item.city)
					newItem.find(".data-joinDate").html(item.joinDate)
					newItem.appendTo(tbody)
				})
			}
		})
		
    </script>
</body>
</html>